<template>
  <div class="bgImg files">
    <div class="body">
      <div class="wenzi">
        <h1>标签云</h1>
         <i class="iconfont icon-xian-xuxian"></i>
         <span>label</span>
      </div>
      <div class="bodyBg">
        <div class="body-children">
            <div class="body-title">
              <h2 class="bt-h2">知识标签</h2>
              <i class="iconfont icon-xian-xuxian"></i>
              <span>Tags{{Tags.length}}</span>
            </div>
            <div class="body-klTags">
              <div v-for="(ktItem,ktIndex) in Tags" :key="ktIndex" :class="setClass(ktIndex)" @click="tokt(ktItem.sort_id)">
                <i class="iconfont icon-biaoqian"></i>
                <span class="biaoqian-span" >{{ktItem.sortName}}</span>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      Tags:[],
      contentTags:[]
    }
  },
  mounted(){
    this.knowTs();
    // this.contentTs();
  },
  methods:{
    // 获取知识标签
    async knowTs (){
      const {data:res} = await this.$http.get("getknowTags");
      // console.log("这里是获取知识标签部分");
      // console.log(res);
      if(res.status != 200){
        this.$message.error('获取知识标签数据失败');
      }else{
        this.Tags = res.message;
        // console.log(this.Tags);
      }
    },
    setClass(index){
      return index%3==0?'frcont':'flcont';
    },
    //去标签详情页
    tokt(id){
      // 2、this.$router.push({path:'路由命名', query:{ 参数名:参数值 } })
      // console.log("这是id:"+id);
      this.$router.push({path:"/labelList",query:{ktId:id}})
    },
  }
}
</script>
<style scoped>
.body-title {
  display: flex;
  align-items: center;
  width: 200px;
  /* background: red; */
  margin: auto;
  justify-content: space-around;
}
.body-klTags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* justify-content: space-around; */
  width: 700px;
  margin: 100px auto;
  /* background: rebeccapurple; */
  flex-wrap: wrap;
  align-items: center;
}
.body-klTags>div {
  /* margin: 10px; */
  overflow: hidden;
}
.biaoqian-span {
  width: 100%;
  transition: all 1s;
  font-family:Arial,Helvetica,sans-serif;
  font-weight: 800;
}
.biaoqian-span:hover {
  transform: scale(1.2);
  opacity: 0.6;
  cursor: pointer;
  color: pink;
}
.frcont {
  color: #d68080;
  margin: 10px;
}
.flcont {
  color: #0ea6ca;
  font-size: 30px;
  margin: 20px;
}
</style>
